<template>
    <div>
        <el-alert title="关于实行排班的提示" type="warning"
            description="实行排班，请先选择科室，再选择日期，再点击相关医生后的排班按钮！查询排班则相反操作">
        </el-alert>
        <!-- 日期卡片 -->
        <el-card shadow="hover">
            <div>
                <ul class="dateUl">
                    <li v-for="monthDay in monthDays" :key="monthDay">
                        <el-button key="date-button" type="primary" plain style="margin: 6px;"
                            @click="dateClick(monthDay)">
                            {{ monthDay }}
                        </el-button>
                    </li>

                </ul>
            </div>
        </el-card>

        <!-- 科室选择 -->
        <el-card shadow="hover">
            <el-tabs type="border-card">
                <el-tab-pane label="住院科室">
                    <ul class="dateUl">
                        <li v-for="outDe in outDes" :key="outDe.id">
                            <el-button type="success" plain key="inter-button"
                                @click="selectionOutClick(outDe.deName)">{{ outDe.deName }}</el-button>
                        </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label="门诊科室">
                    <ul class="dateUl">
                        <li v-for="InDe in InDes" :key="InDe.id">
                            <el-button type="success" plain key="inter-button" @click="selectionInClick(InDe.deName)">{{
                        InDe.deName }}</el-button>
                        </li>
                    </ul>

                </el-tab-pane>
            </el-tabs>
        </el-card>



        <el-row>
            <el-col :span="24">
                <span style="color:coral;">排班日期：<span style="color:darkcyan;">{{ arrangeTime }}</span> & </span>
                <span style="color:coral;">科室：<span style="color:darkcyan;">{{ deName }}</span></span>

            </el-col>
        </el-row>

        <el-row>
            <el-col :span="6">
                <el-input placeholder="按照医生姓名模糊查询" v-model="docName" class="input-with-select" clearable="">
                    <el-button slot="append" icon="el-icon-search" @click="queryList"></el-button>
                </el-input>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <!-- 医生表格 -->
                <el-table :data="tableData" border style="width: 100%" height="550">
                    <el-table-column prop="docDeId" label="科室id" v-if="false">
                    </el-table-column>
                    <el-table-column prop="deName" label="科室">
                    </el-table-column>
                    <el-table-column prop="id" label="医生id" v-if="false">
                    </el-table-column>
                    <el-table-column prop="docName" label="医生">
                    </el-table-column>
                    <el-table-column prop="up" label="职称">
                    </el-table-column>
                    <!-- <el-table-column prop="scDate" label="排班日期">
                    </el-table-column>
                    <el-table-column prop="scStatus" label="状态">
                    </el-table-column> -->
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="requestDoc">查看</el-button>
                            <el-button type="text" size="small" @click="addSchedule(scope.row)">排班</el-button>
                        </template>
                        <!-- <el-button type="text" size="small" @click="requestDoc">查看</el-button> -->


                    </el-table-column>

                </el-table>

            </el-col>
        </el-row>
        <el-dialog title="排班情况" :visible.sync="dialogTableVisible">
            <el-table :data="schedules">
                <el-table-column property="scDate" label="排班日期"></el-table-column>
                <!-- <el-table-column property="scTimeSlot" label="区间">
                    <template slot-scope="scope">
                        {{ scope.row.scTimeSlot == 0 ? '上午' : '下午' }}
                    </template>
                </el-table-column> -->
                <el-table-column property="scStatus" label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.scStatus == 0 ? '休息' : '上班' }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

       




    </div>

</template>

<script>
export default {
    data() {
        return {
            monthDays: [],
            arrangeTime: "",
            monthDay: "",
            tableData: [],
            // schedules: {},
            outDes: [],
            InDes: [],
            deName: "",
            docName: "",
            schedules: [],
            dialogTableVisible: false,
            schDoc: {}
        };
    },

    methods: {
        selectionOutClick(selection) {
            this.deName = selection
            this.queryList()
        },
        selectionInClick(selection) {
            this.deName = selection
            this.queryList()
        },
        //查询班次
        queryList() {
            let param = {}
            param.scDate = this.arrangeTime
            param.deName = this.deName
            param.docName = this.docName
            this.$axios.post("api/schedule/querylist", param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.tableData = res.data.data
                        this.schedules = res.data.data.map(item => item.scheduleList).flat();
                        console.log(res.data.data)
                    }
                })

        },
        dateClick(monthDay) {
            const nowDate = new Date()
            let year = nowDate.getFullYear()
            let dateTime = year + "-" + monthDay
            this.arrangeTime = dateTime
            //this.queryList()

        },
        nowDay(num) {
            let nowDate = new Date()
            nowDate.setDate(nowDate.getDate() + num)
            let month = nowDate.getMonth() + 1
            let date = nowDate.getDate()
            if (date < 10) {
                date = "0" + date

            }
            if (month < 10) {
                month = "0" + month

            }
            let time = month + "-" + date
            this.monthDays.push(time)

        },
        //住院科室
        queryOutde() {
            this.$axios.get("api/form/queryde")
                .then(res => {
                    if (res.data.code == 200) {
                        this.outDes = res.data.data
                    }
                })
        },
        //门诊科室
        queryInde() {
            this.$axios.get("api/form/queryoutde")
                .then(res => {
                    if (res.data.code == 200) {
                        this.InDes = res.data.data


                    }
                })
        },
        requestDoc() {
            this.dialogTableVisible = true
            this.queryList()
        },
        //添加排班
        addSchedule(val) {
            let param = {}
            param.id = val.id
            param.docDeId = val.docDeId
            param.scDate = this.arrangeTime
            console.log(this.arrangeTime)
            this.$axios.post("api/schedule/addschedule", param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$notify({
                            title: '消息',
                            message: '排班中，请稍后查询；提示：当天已经排班的医生不会再排班',
                            type: 'warning'
                        });

                    }
                })
        }




    },
    created() {
        this.queryInde()
        this.queryOutde()
        this.queryList()
        for (let i = 0; i < 25; i++) {
            this.nowDay(i)
        }
    }
};

</script>

<style scoped>
.dateUl {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    /* 允许日期按钮自动换行 */
}

.dateUl li {
    flex-grow: 1;
    /* 填充父级容器的剩余空间 */
    margin-right: 6px;
    margin-bottom: 6px;
    /* 添加底部间距 */
}

.el-card {
    display: flex;
    /* 确保 el-card 是一个 Flex 容器 */
}
</style>